<template>
  <Table
    :row-class-name="rowClassName"
    :columns="colData"
    :data="resTableData"
    :height="tableHeight"
    :max-height="height"
    :highheight-row="highheightRow"
  ></Table>
</template>

<script>
export default {
  name: "myTable",
  props: {
    tableData: {
      type: Array
    },
    tableHeight:{
      type:String,
      default:"300"
    }
  },
  computed: {
    resTableData: function() {
      return this.tableData.map(ele => {
        ele.cellClassName = {
          level:
            ele.level === "合规"
              ? "demo-table-info-cell-legal"
              : "demo-table-info-cell-illegal"
        };
        // console.log(ele.level+" "+ele.cellClassName.level)
        return ele;
      });
    }
  },
  // watch:{
  //   tableHeight: function(newvalue){
  //       console.log("tableHeight change",newvalue)   
  //   }
  // },
  mounted() {},
  data() {
    return {
      height: 780,
      highheightRow: true,
      newTableData: [],
      colData: [
        { title: "事件序号", key: "index", width: "100" },
        { title: "事件名称", key: "event_name", width: "160" },
        { title: "事件原因", key: "cause", width: "auto" },
        { title: "报警等级", key: "level", width: "120", align: "center" },
        { title: "发生时间", key: "datetime", width: "200" },
        {
          title: "事件详情",
          key: "detail",
          width: "100",
          align: "center",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "success",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    // console.log("点击事件详情：", params.row, params.index);

                    this.$emit("handleTableEventDetail", params.row);
                  }
                }
              },
              "查看详情"
            );
          }
        },
        {
          title: "事件视频",
          key: "vidio",
          width: "100",
          align: "center",
          render: (h, params) => {
            if (
              params.row.http_url_video.endsWith("null")||params.row.http_url_video === ""
            )
              return h("Span", {}, "无视频");
            else
              return h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      // console.log("点击事件视频：", params.row, params.index);

                      this.$emit("handleTableEventVideo", params.row);
                    }
                  }
                },
                "查看视频"
              );
          }
        }
      ]
    };
  },
  methods: {
    rowClassName() {
      // console.log("row：" + row, "，index：" + index);

      return "demo-table-info-row";
    }
  }
};
</script>

<style lang="less">
@table-background-color: #0a4271 !important;

</style>
